<template>
  <div class="tabBar">
      <router-link class="home tab" to="/">
          <span :class="{'active': number === 1}" @click="changeNum(1)"></span>
          <div>首页</div>
      </router-link>
      <router-link class="market tab" to="/market">
          <span :class="{'active': number === 2}" @click="changeNum(2)"></span>
          <div>闪送超市</div>
      </router-link>
      <router-link class="cart tab" to="/cart" ref="cartEl">
          <span :class="{'active': number === 3}" @click="changeNum(3)"></span>
          <var v-if="cartsLen>0" :class="{'active': cartActive}">{{cartsLen}}</var>
          <div>购物车</div>
      </router-link>
      <router-link class="mine tab" to="/mine">
          <span :class="{'active': number === 4}" @click="changeNum(4)"></span>
          <div>我的</div>
      </router-link>
  </div>
</template>
<script>
export default {
    data () {
        return {
            number: 1
        }
    },
    mounted () {
    // 获取cart标签的位置
    let cartPos = this.$refs.cartEl.$el.getBoundingClientRect()
    
    this.$store.commit('CART_POS', cartPos)
  },
  methods: {
      changeNum (index) {
          this.number = index
      }
  },
  computed: {
    cartsLen () {
      return this.$store.getters.cartsLen
    },
    cartActive () {
        return this.$store.state.cartActive
    },
  }
}
</script>
<style scoped>
@import url("../../common/style/variable.less");
@import url("../../common/style/mixin.less");
.tabBar{
    width: 100%;
    height: 5rem;
    background-color: rgb(246,246,246);
    box-sizing: border-box;
    position: fixed;
    /* z-index: 2; */
    bottom: 0;
    left: 0;
    text-align: center;
}
.tabBar > .tab{
    width: 25%;
    height: 100%;
    float: left;
    font-size: 1.5rem;
    color: rgb(119,119,119);
    text-decoration: none;
    display: flex;
    flex-flow: nowrap column;
    align-items: center;
    justify-content: space-around;
}
@keyframes navs{
  0%{
    -webkit-background-size: auto .6rem;
    background-size: auto .6rem;
  }
  20%{
    -webkit-background-size: auto 2.2rem;
    background-size: auto 2.2rem;
  }
  40%{
    -webkit-background-size: auto 1.8rem;
    background-size: auto 1.8rem;
  }
  60%{
    -webkit-background-size: auto 2.06rem;
    background-size: auto 2.06rem;
  }
  80%{
    -webkit-background-size: auto 1.94rem;
    background-size: auto 1.94rem;
  }
  100%{
    -webkit-background-size: auto 2rem;
    background-size: auto 2rem;
  }
}
.tab> span.active{
    -webkit-animation: navs 1s;
    animation: navs 1s;
}
.home > span{
    display: block;
    width: 30%;
    height: 40%;
    background: url('./images/home.png') no-repeat center;
    background-size: 100% 100%;
}
.home > span.active{
    display: block;
    width: 30%;
    height: 40%;
    background: url('./images/home-active.png') no-repeat center;
    background-size: 100% 100%;
}
.market > span{
    display: block;
    width: 30%;
    height: 40%;
    background: url('./images/current.png') no-repeat center;
    background-size: 100% 100%;
}
.market > span.active{
    display: block;
    width: 30%;
    height: 40%;
    background: url('./images/current-active.png') no-repeat center;
    background-size: 100% 100%;
}
.cart > span{
    display: block;
    width: 30%;
    height: 40%;
    background: url('./images/cart.png') no-repeat center;
    background-size: 100% 100%;
}
.cart > span.active{
    display: block;
    width: 30%;
    height: 40%;
    background: url('./images/cart-active.png') no-repeat center;
    background-size: 100% 100%;
}
.mine > span{
    display: block;
    width: 30%;
    height: 40%;
    background: url('./images/mine.png') no-repeat center;
    background-size: 100% 100%;
}
.mine > span.active{
    display: block;
    width: 30%;
    height: 40%;
    background: url('./images/mine-active.png') no-repeat center;
    background-size: 100% 100%;
}
.tab>var{
  position: absolute;
  right: 6.4rem;
  top: 0.5rem;
  background-color: #f40;
  color: #fff;
  line-height: 2.3rem;
  height: 2rem;
  width: 2rem;
  text-align: center;
  font-size: 1rem;
  border-radius: 50%;
  transform: scale(1);
  -webkit-transition: all 0.3s cubic-bezier(0.28,-0.42, 0.37, 1.55);
  -o-transition: all 0.3s cubic-bezier(0.28,-0.42, 0.37, 1.55);
  transition: all 0.3s cubic-bezier(0.28,-0.42, 0.37, 1.55);
}
.tab>var.active{
  transform: scale(1.5)
}
</style>
